<template>
  <div class="app-container">
    <!-- 查询参数及按钮部分 -->
    <div class="filter-container">
      <el-row>
        <el-col :span="1">
          <i
            :class="[treeShow ? 'el-icon-s-fold treeI': 'el-icon-s-unfold treeI']"
            @click="toggerTree"
          />
        </el-col>
        <div class="Sign">
          <el-dialog  v-dialogDrag  
            :close-on-click-modal="false"
            :title="dialogStatus"
            width="30%"
            :visible.sync="dialogEditFormVisible"
          >
            <el-form
              ref="dataForm"
              class="dialog-Backgroundcolor"
              :model="listQuery"
              label-position="right"
              label-width="100px"
            >
              <el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="工资月份：">
                      <div class="pick">
                        <el-date-picker
                          v-model="listQuery.choiceOfTime"
                          class="filter-item Borderwidth"
                          type="month"
                          placeholder="请选择工资月份"
                          style="width:50%;"
                          :clearable="false"
                          value-format="yyyy-MM"
                          :editable="false"
                          @input="immediUpdate"
                        />
                      </div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-button
                  type="primary"
                  style="float:right;"
                  @click="handleQuery"
                >
                  查询
                </el-button>
              </el-row>

            </el-form>
          </el-dialog>
        </div>
        <div class="model">
          <el-col style="text-align: right;" :span="23">
            <el-col :span="4" style="margin-top:10px">
              <span>查询日期：{{ this.listQuery.choiceOfTime }}</span>
            </el-col>

            <el-col :span="10" align="center" style="font-size: 20px">
              <span>{{ this.listQuery.choiceOfTime }}工资支付数据表</span>
            </el-col>

            <el-col :span="2" style="margin-top:10px">
              <span>金额单位:元</span>
            </el-col>
            <el-button
              size="small"
              class="filter-item"
              type="primary"
              @click="Query"
            >
              查询
            </el-button>
            <el-button
              size="small"
              class="filter-item"
              type="primary"
              @click="outPutFile"
            >
              导出
            </el-button>
            <!-- <el-button
              size="small"
              class="filter-item"
              type="primary"
            >
              打印
            </el-button> -->
          </el-col>
        </div>
      </el-row>
    </div>
    <div
      ref="box"
      class="box"
    >
      <div
        class="left"
        :class="[isActive ? 'wid':'wids']"
      >
        <div
          :class="[treeShow ? 'treeShow' : 'treeNotShow']"
          :style="{'height' : treeHeight + 'px'}"
        >
          <AgencyTree
            class="agencyTree"
            @handleTreeQuery="handleTreeQuery"
          />
        </div>
      </div>
      <div
        v-show="Show"
        class="resize"
        title="收缩侧边栏"
      />
      <div
        class="mid"
        :class="[isActive ? 'mids': 'min']"
      >
        <div>
          <el-table
            ref="singalTable"
            v-loading="listLoading"
            :data="list"
            :stripe="true"
            fit
            :height="tableHeight"
            :header-cell-style="{background:'#eef1f6',color:'#606266'}"
          >
            <template slot="empty">
              <tableEmpty />
            </template>
            <el-table-column
              lable=""
              prop="no"
              align="center"
              width="80"
              fixed
            />
            <el-table-column
              label="单位名称"
              align="center"
            >
              <template slot-scope="{row}">
                <span style="float: left">{{ row.agencyName }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="合计工资总额"
              align="center"
            >
              <template slot-scope="{row}">
                <span style="float: right">{{ Number(row.registerSalary).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,") }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="实发在职工资"
              align="center"
            >
              <template slot-scope="{row}">
                <!--Number(row.theActualTotalWages).toFixed(2)把获取来的数据转换成数字保留两位小数  -->
                <span style="float: right">{{ Number(row.quitSalary).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,") }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="实发离休费"
              align="center"
            >
              <template slot-scope="{row}">
                <span style="float: right">{{ Number(row.totalSalary).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,") }}</span>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            :total="total"
            :page.sync="listQuery.page"
            :limit.sync="listQuery.limit"
            @pagination="getList"
          />
          <!-- 分页 -->
          <!-- <pagination
            :total="total"
            :page.sync="listQuery.page"
            :limit.sync="listQuery.limit"
            @pagination="getList"
          /> -->
        </div>
      </div>
      <Drag ref="icon" />

    </div>
    <!-- 表格部分 -->

  </div>
</template>

<script>
import { getPayrollDataList, outPutPayrollDataList } from '@/api/generateSalaryData/querySalaryData'
import Pagination from '@/components/Pagination'
import AgencyTree from '@/components/tree/agencyTree'
import Drag from '@/components/Drag'
import tableEmpty from '@/components/table/empty'
export default {
  name: 'Unit',
  components: { Pagination, AgencyTree, Drag, tableEmpty },
  data() {
    return {
      treeHeight: null,
      tableHeight: null,
      dialogStatus: '',
      dialogEditFormVisible: false,
      Show: false,
      isActive: true,
      treeShow: false,
      that: this,
      list: null,
      total: 0,
      listLoading: false,
      listQuery: {
        page: 1,
        limit: 200,
        choiceOfTime: '',
        agencyId: '0'
      }
    }
  },
  watch: {
    list(val) {
      this.doLayout()
    }
  },
  mounted() {
    this.dragController()
    this.getTbHeight()
    this.getTeHeight()
  },
  beforeMount() {
    window.addEventListener('resize', this.getTbHeight)
    window.addEventListener('resize', this.getTeHeight)
  },
  created() {
    this.getNowTime()
    this.getList()
  },
  methods: {
    getTeHeight() {
      this.treeHeight = window.innerHeight - 270
    },
    doLayout() {
      this.$nextTick(() => {
        this.$refs.singalTable.doLayout()
      })
    },
    getTbHeight() {
      this.tableHeight = window.innerHeight - 222
    },
    // 拖拽
    dragController() {
      this.$refs.icon.dragControllerDiv()
    },
    // 树显隐方法
    toggerTree() {
      this.treeShow = !this.treeShow
      this.isActive = !this.isActive
      this.Show = !this.Show
    },
    // 树方法
    handleTreeQuery(data) {
      this.listQuery.agencyId = data.id
      this.getList()
    },
    // 查询
    Query() {
      this.dialogStatus = '查询'
      this.dialogEditFormVisible = true
    },
    // 获取查询数据
    getList() {
      this.listLoading = true
      // 获取table数据，分页unitSubmitSituationQuery
      getPayrollDataList(this.listQuery).then(response => {
        this.list = response.data.rows
        this.total = response.data.total
        // 当数据查询出来以后不在转圈
        this.listLoading = false
      })
    },
    //
    immediUpdate(e) {
      this.$nextTick(() => {
        if (e === null || e === '') {
          this.listQuery.choiceOfTime = ''
        } else {
          var date = e
          if (date !== '' && date !== null) {
            const year = date.getFullYear()
            let month = date.getMonth() + 1
            if (month >= 1 && month <= 9) {
              month = '0' + month
            }
            this.$set(this.listQuery, 'choiceOfTime', year + '-' + month)
          }
        }
      })
    },

    // 查询按钮功能
    handleQuery() {
      this.listQuery.page = 1
      // 然后走这个方法
      this.getList()
      this.dialogEditFormVisible = false
    },
    // 给日期控件附默认月份
    getNowTime() {
      var now = new Date()
      var year = now.getFullYear() // 得到年份
      var month = now.getMonth() // 得到月份
      month = month + 1
      month = month.toString().padStart(2, '0')
      var defaultDate = `${year}-${month}`
      this.$set(this.listQuery, 'choiceOfTime', defaultDate)
    },
    // 导出
    outPutFile() {
      outPutPayrollDataList(this.listQuery).then(response => {
        const link = document.createElement('a')
        const objectUrl = URL.createObjectURL(response)
        link.href = objectUrl
        link.download = '工资支付数据.xlsx'
        link.click()
        URL.revokeObjectURL(objectUrl)
      })
    }
  }
}
</script>

